<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Let关键字</h1>
		<ul>
			<li>这是行1</li>
			<li>这是行2</li>
			<li>这是行3</li>
			<li>这是行4</li>
			<li>这是行5</li>
		</ul>
		<script>
			// 1. let声明的关键字和var声明基本一致
			var a = 15;
			let b = 20;
			// console.log(a,b);
			// 2. let声明的关键字是局部作用域，只在一对{}中启用
			// if switch for 都可以形成局部作用域
			// var 只能通过函数形成函数作用域
			if(true){
				var c = 100;
			}
			// console.log(c);
			if(true){
				let d = 200;
			}
			// console.log(d);
			for(var i=0;i<5;i++){}
			// console.log(i);
			for(let k=0;k<5;k++){}
			// console.log(k);
			// 单击li alert弹出下标
			// 选择到所有的li标签
			var  lis = document.querySelectorAll("ul li");
			// 遍历并弹出下标
			for(let j=0;j<lis.length;j++){
				lis[j].onclick = function(){
					alert(j)
				}
				// var声明的变量 for循环在单击时候已经执行完毕 ，执行完毕j的值就是5
				// let声明局部作用域（for循环的局部作用域是相互不影响的）
				// lis[j].onclick = function...代码在局部作用中执行，就可以读取到当前局部作用域的 j
			}
			// 03 let 不会变量提升（在javascript引擎执行代码前，先把所有变量和函数提升到最前面，变量统一赋值为undefined ）
			
			// alert(d);
			// var d = 20;
			
			// alert(e);
			// let e = 80;
			
			// 04 let在同一个作用域不能重复声明
			var f = 50;
			var f = "love js";
			let g = 60;
			let g = "good";
		</script>
	</body>
</html>
